import React, {useRef, useState} from 'react';
import {StyleSheet, Text, View, Animated} from 'react-native';
import VideoList from '../../../components/videoList';
import Viewpager from '@react-native-community/viewpager';
import IconButton from '../../../components/IconButton';
import TextBtn from '../../../components/TextBtn';

const index = () => {
  const viewpagerRef = useRef();
  const [left] = useState(new Animated.Value(0));
  return (
    <>
      <Viewpager
        ref={viewpagerRef}
        initialPage={0}
        style={{flex: 1}}
        onPageSelected={(e) => {
          let toValue = e.nativeEvent.position === 0 ? 0 : 57;
          Animated.timing(left, {
            toValue,
            duration: 200,
            useNativeDriver: true,
          }).start();
        }}>
        <View key="gz">
          <VideoList />
        </View>
        <View key="tj">
          <VideoList />
        </View>
      </Viewpager>
      <View
        style={{
          position: 'absolute',
          top: 25,
          flexDirection: 'row',
          paddingLeft: 15,
          paddingRight: 15,
        }}>
        <IconButton name="camera" color="#fff" />
        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
          <View style={{flexDirection: 'row'}}>
            <TextBtn
              title="关注"
              style={styles.textBtns}
              onPress={() => {
                viewpagerRef.current.setPage(0);
                Animated.timing(left, {
                  toValue: 0,
                  duration: 200,
                  useNativeDriver: true,
                }).start();
              }}
            />
            <TextBtn
              title="推荐"
              style={styles.textBtns}
              onPress={() => {
                viewpagerRef.current.setPage(1);
                Animated.timing(left, {
                  toValue: 57,
                  duration: 200,
                  useNativeDriver: true,
                }).start();
              }}
            />
            <Animated.View
              style={{
                width: 40,
                height: 5,
                backgroundColor: '#fff',
                position: 'absolute',
                left: 10,
                bottom: -10,
                transform: [
                  {
                    translateX: left,
                  },
                ],
              }}
            />
          </View>
        </View>
        <IconButton name="search1" color="#fff" />
      </View>
    </>
  );
};

export default index;

const styles = StyleSheet.create({
  textBtns: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
    marginLeft: 10,
    marginRight: 10,
  },
});
